Hello and welcome to this lecture.
In this lecture we are going to be creating the stylin for how a calculator using skill sets.
So we'll be using the combination of external success and in line C assess.
So this is what the calculator looks like at the moment.
So by the time we're done with this lecture he should look a little bit prettier.
So this is my test it on.
And this is my style sheet.
WHERE WERE will implement the external violin for the couple later.
The way I'm going to structure this lecture is to add a chunk of code at a time and then explain it
to you.
Okay.
I have added some code from line 1 to line 10.
So let me run through this some of these you may already know.
The lie one here got input input.
This is known as the Selecta so you must have something that you want to do something to.
For example if you are going to have your hair cut your hair will be the selector and then you have
to tell the Barbar what to do to the head.
So here's how it works in the same way.
Input here is to select all the items in blue here.
This on the items on the left of the colon is known as the property.
The property is what we want to apply to the selector.
The values outside the call on here is that that is what we wanted to have for example how one with
which is a property of that input to be a hundred and fifty pixels white.
Okay so you separate the property from the value with a colon and then you end with a semicolon without
so my call on it will not work.
So make sure you end with a semicolon once you finished the height.
I've set it to that the font size which is the size of the text I have set it to this.
The border radios body radius is what gives it a beat of rounded corner so this isn't brother Bob but
I rate as property and I'll sell it to 10 pixels.
These values.
Feel free to play around with them so that you can see how they work.
The beauty of browser development is that you can see what the result of forger develop in straightaway
away.
The marjane have given it 10 pixels.
Margin refers to this space outside.
So for example you've got a box.
So this base outside is known as a margin.
Why the space inside is known as padden.
So where you've got wide margin is usually four corners.
You've got the top the right the bottom and the left.
That's how the styling is applied the way I remember it is by using the word trouble and then taking
out the valves.
We shall the holes.
That leaves you with top right bottom left.
So when you have just two one values specified it for use a value on or the four corners like.
Top right bottom left background column I've set it to this have use HEX collar hexadecimal Quellos.
You can also use the name of the collar.
If you know it for example this means black so I could use black instead of that.
And then the colour colour here offence refers to the colour of the text.
So this is white in exact values and then body style is not so I don't want any shadow or anything on
the borders.
So this is a stylin for the input input.
Basically is free.
If the business is failing for the input tech I have added some more could hear from line 12 to 24 line
12.
Here I've got my I've got an idea here.
You identify an idea with the hash tag.
So I do.
Here is my form so move form here.
These are the stylin I have applied to it might on me.
This is just a comment.
So if you want to write a comment on a on a Seer says this is how you implement a comment.
So anything they have to comment on will not reflect on the styling.
Okay so comments are quite good.
He can use them for troubleshooting or trying things out.
So this idea here.
This is the stylin I'm giving to the idea.
I want the margin from the one margin on the left to be two hundred and twenty five pixels so what I'm
saying is that from the left of the from the left I want it to move two hundred twenty five pixels and
then from the top I want it to drop down 20 pixels.
That's what that means.
And then this.
Here is this filing for the H1 tag which is the head tag.
Again the text allowing want the text to be centred have given me a font size of 80 pixels.
That's how big I want it to be in the margin.
I've said from the right.
I want to move fit one 50 pixels from the top.
And one is to drop 20 pixels so let's save that and see what he did or looks like at the moment.
So this is our calculate on fire refresh.
This is what iscar SEE is looking a little bit prettier.
Okay.
So this is what it looks like at the moment with this filing we have used.
Next we are going to use some inline styling.
That means we're going to go inside the hastier mail document and apply the stylin in line with the
tool tag.
Okay.
So I am on the yellow shawl here CML documents which is that in his email here had on line 17 which
is the actual import for the display which is the screen that would display the results of the couple
later.
Her title Tom into line styling.
So this is inside the outboard tag itself.
I have a style tag so you begin Will you use this style as an attribute.
So the actual style becomes an attribute and value would be the become the property and the values for
that input tag.
So this input tank here has given it a wave of 6 7 5 pixels have given a height of that detect harline
to be Centre.
Miss any text that is that it displays and want it to be centred.
Given the background of this and this brigg tag you're basically kristo space underneath it.
So if I save that and refresh you should see the displays should be blue.
Now you can see here.
It is now blue so this is what we have just applied stylee to.
I have added some more in a line stylin inside the hatim old document.
Saw on line 21 here.
I want the bottas for the operators that me the plus the minus the equals at times and a division.
I want them all have different colours so that's the styling I have implemented line 21 here.
Not is I've used this baule here as an attribute and then the value equal to the properties.
The property I want a style and then the value for the property.
So the background colloquy are both gleib set the bag quoll for the plus have said the background colour
online 25 for the miners had on online 29 for their times online thirty one for the see which is éclair
function.
Now are you clear the screen and horn line thirty three for the deficients.
I've said that to green so I'll save that and fire launch the browser.
You should see the difference.
So you can see all the operators have different background quellos and also have made the sea here.
Give me a different background so this is what will clear you use to clear values.
So if I press on the bottom we can see nothing is happening at the moment the Jav us group all create
the functionality for that.
So for this lecture we had done the stylin of the calculator was ready in the next lecture will implement
the java script to make the bottoms actually work and perform some calculation.
Take care.
Bye for now.